<template>
  <div>
    <MyHeader background="skyblue" color="#fcfcfc" title="购物车"></MyHeader>
    <div class="main">
      <MyGoods v-for="obj in list" 
      :key="obj.id"
      :Obj="obj"
      >
    </MyGoods>
    </div>
    <MyFooter  @sumFn='fn' :arr="list"></MyFooter>
   </div>
</template>
 
<script>
  // 目标:项目初始化-静态页面
  // 1.创建项目 - 下包 - 引入bootstrap样式
  // 2.拆分项目 - 创建 - 分别标签和样式
  // 3.在App.vue上面显示

// 数据渲染--目标
// 1. App.vue把数据保存到data定义的变量上
// 2. 使用v-for循环数组使用组件
// 3. 分别给商品组件传入数据对象
// 4. 商品组件接收后, 使用对象里字段数据展
  import MyHeader from './第五天作业/MyHeader.vue'
  import MyGoods from './第五天作业/MyGoods.vue'
  import MyFooter from './第五天作业/MyFooter.vue'

export default {
  name: "",
  components: {
    MyHeader,
    MyGoods,
    MyFooter,
  },
  props: {},
  data() {
    return {
      list:[],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.$axios({
      url: "/api/cart"
    }).then(res => {
      this.list = res.data.list
      // console.log(this.list)
      
    })
  },
  methods: {
    fn(value){
      this.list.forEach(item => item.goods_state = value)
    }
  }
};
</script>

<style scoped>
     .main {
       padding-top:45px;
       padding-bottom:50px;
     }
</style>